alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import { page } from "$app/state";
3 import { setContext } from "svelte";
4 import { createProfileCounts, PROFILE_COUNTS_KEY } from "$lib/components/profile/counts.svelte";
5 import EmptyState from "$lib/components/ui/EmptyState.svelte";
6 import ProfileCard from "$lib/components/profile/ProfileCard.svelte";
7 import ProfileTabs from "$lib/components/profile/ProfileTabs.svelte";
8 import TabPanel from "$lib/components/ui/TabPanel.svelte";
9
10 let { children, data } = $props();
11
12 const profileCounts = createProfileCounts(
13 () => data.identity.did,
14 () => data.counts
15 );
16 setContext(PROFILE_COUNTS_KEY, profileCounts);
17 const counts = $derived(profileCounts.value);
18 const tabParam = $derived(page.url.searchParams.get("tab") ?? "overview");
19 const activeTab = $derived(
20 ["repos", "starred", "strings", "vouches"].includes(tabParam) ? tabParam : "overview"
21 );
22</script>
23
24<svelte:head>
25 <title>{data.identity.handle} · Tangled</title>
26</svelte:head>
27
28<section class="mx-auto w-full max-w-screen-lg py-6">
29 {#if data.notJoined}
30 <EmptyState message={`${data.identity.handle} hasn't joined Tangled yet.`} />
31 {:else}
32 <ProfileTabs handle={data.identity.handle} active={activeTab} {counts} />
33 <TabPanel as="div" padded={false} class="grid md:grid-cols-11 md:gap-4 md:p-6">
34 <aside class="p-6 md:col-span-3 md:p-0">
35 <ProfileCard
36 identity={data.identity}
37 profile={data.profile}
38 followers={counts.followers}
39 following={counts.following}
40 viewerFollowRkey={data.viewerFollowRkey}
41 />
42 </aside>
43 <div class="min-w-0 border-t border-border-default p-6 md:col-span-8 md:border-t-0 md:p-0">
44 {@render children()}
45 </div>
46 </TabPanel>
47 {/if}
48</section>